<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-setting-container`]">
      <view class="setting-row" v-for="(item, index) in accountList" :key="index" @click="handleClick(item)">
        <view class="left"> {{ item.name }} </view>
        <view class="right" v-if="item.value">{{ item.value }} <uv-icon name="arrow-right"></uv-icon> </view>
        <view class="right tips" v-else>{{ item.tips }} <uv-icon name="arrow-right"></uv-icon> </view>
      </view>
    </view>
    <uv-modal ref="modal" title="温馨提示" align="center" :confirmColor="theme" content="是否更换绑定手机号码" :showCancelButton="true" @confirm="confirm"></uv-modal>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'setting',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      accountList: [
        {
          name: '手机号码',
          key: 'phone',
          path: '',
          value: '',
        },
      ],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'userInfo', 'theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    if (this.isLogin) {
      this.accountList[0].value = this.userInfo.phone
      this.accountList.push({ name: '注销用户', path: '/pages/subpackage/privacy-policy/logout', tips: '账号将永久注销，无法恢复' })
    }
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handleClick({ path, key }) {
      if (path) {
        this.$ROUTE.go(path)
        return
      }
      if (key && key === 'phone') {
        this.$refs.modal.open()
      }
    },
    confirm() {
      this.$ROUTE.go('/pages/subpackage/privacy-policy/bindAccount')
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('setting-container')} {
  position: relative;
  background: white;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .setting-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    .right {
      display: flex;
      color: #333333;
    }
    .tips {
      color: #666666;
    }
  }
}
</style>
